<template>
    <div id="roll-call-det">
        <div class="breadcrumb">
            <img src="../../../../static/img/campus_icon_1.png" class="head_img">
            <span class="title" @click="toTeac">课堂点名 / </span>
            <span class="title" @click="toStu">课程详情 / </span>
            <span>学生详情</span>
        </div>
        <div class="list">
            <div class="list_head">
                <span class="head_name">
                    <span>姓名：{{name}}</span>
                    <span style="margin-left:20px;">学号：{{campusId}}</span>
                    <span style="margin-left:20px;">教师：{{teacher}}</span>
                    <span style="margin-left:20px;">课程：{{className}}</span>
                    <span style="margin-left:20px;">点名次数：{{rollCallNum}}</span>
                </span>
                <el-button class="cancel" type="primary" @click="toStu">返回</el-button>
            </div>

            <div class="tips">出勤情况请在教师端APP修改</div>

            <el-table :data="list" style="width:50%;">
                <el-table-column label="点名日期" align="center">
                    <template scope="scope">
                        <div class="text-cell">{{scope.row.date}}</div>
                        <div class="text-cell" style="font-size:14px;">{{scope.row.dayTime}}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="出勤情况" align="center">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";

    export default {
        data() {
            return {
                list: [],
                name: "",
                campusId: "",
                teacher: "",
                className: "",
                rollCallNum: ""
            };
        },
        mounted() {
            this.getLocalStorage();
            this.getList();
        },
        computed: mapState({ user: state => state.user }),
        methods: {
            toTeac() {
                let url = location.href.replace("rollCallDet", "teacherList");
                location.href = url;
            },
            toStu() {
                let url = location.href.replace("rollCallDet", "stuList");
                location.href = url;
            },
            //获取本地存储
            getLocalStorage() {
                this.name = this.$util.getStore("name");
                this.teacher = this.$util.getStore("teacher");
                this.campusId = this.$util.getStore("campusId");
                this.className = this.$util.getStore("className");
                this.rollCallNum = this.$util.getStore("rollCallNum");
            },
            //传入‘2017/08/28’,返回'星期一';
            calcWeek(date) {
                let day = new Date(date).getDay();
                switch (day) {
                    case 1:
                        day = '星期一';
                        break;
                    case 2:
                        day = '星期二';
                        break;
                    case 3:
                        day = '星期三';
                        break;
                    case 4:
                        day = '星期四';
                        break;
                    case 5:
                        day = '星期五';
                        break;
                    case 6:
                        day = '星期六';
                        break;
                    case 0:
                        day = '星期日';
                        break;
                }

                return day;
            },
            getList() {
                this.list = [];
                let url = this.$util.domain + "/campusadminapi/v2/rollcall/student/detail";
                this.$http({
                    url,
                    method: "POST",
                    body: JSON.stringify({
                        mid: this.$util.getStore("mid") * 1,
                        cid: this.$util.getStore("cid") * 1,
                        uid: this.$util.getStore("uid") * 1,
                        sid: this.$util.getUrlParam("sid") * 1
                    })
                }).then(response => {
                    if (response.data.error == 10000) {
                        this.list = [];
                        let list = response.data.data;

                        if (list && list.length) {
                            list.forEach(item => {
                                let status;
                                let date = new Date(item.time).format("yyyy/MM/dd");
                                let dayTime = this.calcWeek(item.time) + " " + new Date(item.time).format("hh:mm");
                                if (item.status == 1) {
                                    status = "出勤";
                                } else if (item.status == 2) {
                                    status = "缺勤";
                                } else if (item.status == 3) {
                                    status = "请假";
                                }

                                this.list.push({ date: date, dayTime: dayTime, status: status })
                            });
                        }
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                });
            }
        }
    };
</script>

<style>
    #roll-call-det {
        padding-top: 80px;
        height: calc(100% - 80px);
    }

    #roll-call-det .title {
        color: #0398ff;
    }

    #roll-call-det .list {
        height: calc(100% - 30px);
    }

    #roll-call-det .tips {
        font-size: 14px;
        color: red;
        line-height: 14px;
        margin-bottom: 15px;
    }

    #roll-call-det .text-cell {
        height: 30px;
        line-height: 30px;
        color: #202020;
        font-size: 16px;
    }
</style>